import React, {useState} from 'react';
import { useCallback } from 'react';
import Table from '../components/Table';

export default {
  title: '7 - Table',
  component: Table,
  decorators: [
		(Story) => (
			<div className="canvas">
				<Story/>
			</div>
		),
	],
}

export const Default = () => {
  
  const states = {
    def: {
      schema: {
        name:  {desc: '姓名', type: 'string', width: 0.33},
        age:   {desc: '年龄', type: 'numeric', width: 0.33},
        other: {desc: '其他', type: 'string', width: 0.33},
      },
      layout: [
        {row:['name', 'age', 'other']}
      ],
      header: 'Editing',
      formType: 'compact',
    }
  }

  const data = [...Array(15000)].map(() => ({
    name: Math.random().toString(36).slice(2, 10),
    age: parseInt(Math.random() * 100),
    other: Math.random().toString(36).slice(2, 10),
  }));

  const updateRowData = (currData, index) => {
    data[index] = currData;
  }

  const style = {
    width: '700px',
    height: '600px',
    // border: '1px solid gray',
    // boxSizing: 'border-box',
  }

  return <div style={style}>
    <Table {...{state: states['def'], data, updateRowData}} />
  </div>
} 